@charset "utf-8";

/*rem转换函数(默认设置为40px)*/
	@function torem($px){
	    @return $px / 50px * 1rem;
	}

/*基础全局样式*/
    html{
        width: 100%;
        overflow-x: hidden;
    }
    body{
        font-family: Arial, Helvetica, sans-serif;
        font-size: torem(26px);
        color:#000;
        overflow: hidden;
    }
    a{
        color:#000;
        font-size:torem(16px);
        &:hover{
            color:orange;
        }
    }
    button{
        border: none;
    }
    img{
        vertical-align: top;
    }
    [v-cloak] {
    display: none;
    }

/*内容区布局*/
    .g-box-tyre{
        width: torem(750px);
        height: torem(5050px);
        background: #e94033 url(../image/bgt.jpg) no-repeat;
        background-size: contain;
        position: relative;
    }
    .g-bd-tyre {
        overflow: hidden;
        position: absolute;
        top: torem(1040px);
        left: 0;

        .u-tit1,.u-tit2{
            margin: torem(20px) 0;
            width:torem(750px);
            height: torem(84px);
            text-indent: torem(-9999px);
        }
        .u-tit1{
            background: url(../image/tit1.jpg) no-repeat;
            background-size: contain;
        }
        .u-tit2 {
            background: url(../image/tit2.jpg) no-repeat;
            background-size: contain;
        }

        .trye-gou {
            width: torem(720px);
            height: torem(348px);
            background: url(../image/bg-pro.jpg) no-repeat;
            background-size: contain;
            margin: 0 torem(15px);

            .gou-con {
                overflow: hidden;
                padding: torem(40px);   
            }
            .gou-l {
                float: left;
                position: relative;
                margin: torem(14px);
                img {
                    width: torem(168px);
                    height: torem(238px);
                    // background: url(../image/img01.png) no-repeat;
                    background-size: contain;
                }

                // span {
                //     position: absolute;
                //     left: torem(20px);
                //     top: 0;
                //     display: block;
                //     width: torem(36px);
                //     padding: torem(5px) torem(10px);
                //     line-height: torem(24px);
                //     font-size: torem(18px);
                //     text-align: center;
                //     color: #fff;
                //     background: #f00;
                //     border-bottom-left-radius: torem(28px);
                //     border-bottom-right-radius: torem(28px);
                // }
            }

            .gou-r {
                float: right;
                width: torem(360px);
                padding-top: torem(10px);
                p {
                    font-size: torem(24px);
                    line-height: torem(44px);
                    color: #fff;
                    span {
                        display: inline-block;
                        margin-right: torem(24px);
                    }
                }

                .gou-tit {
                    font-size: torem(30px);
                    line-height: torem(48px);
                    color: #fff;
                  }
                .gou-tip {
                    padding: torem(10px) 0;
                    a {
                        display: inline-block;
                        width: torem(100px);
                        height: torem(30px);
                        font-size: torem(18px);
                        line-height: torem(30px);
                        background: #f9f034;
                        color: #e83219;
                        text-align: center;
                        border-radius: torem(5px);
                      }
                }

                .gou-price {
                    padding: torem(10px) 0;
                    height: torem(34px);
                    span {
                        font-size: torem(30px);
                        color: #fff;
                        font-weight: bold;
                    }
                    em {
                        font-size: torem(16px);
                        color: #fff;
                        margin-left: torem(18px);
                        text-decoration: line-through;
                    }

                }

                .gou-btns {
                    overflow: hidden;
                    .btn-buys {
                        margin-top: torem(10px);
                        float:right;
                        width: torem(194px);
                        height: torem(44px);
                        background: url(../image/btn-buy.jpg) no-repeat;
                        background-size: contain;
                        text-indent: torem(-9999px);
                      }
                }

            }
        }

        .m-products-tyre{
            .tyre-item {
                margin:torem(30px) torem(15px);
                width:torem(660px);
                height:torem(288px);
                padding: torem(30px);
                background: url(../image/bg-pro.jpg) no-repeat;
                background-size: contain;
            }
            .item-l {
                float: left;
                position: relative;

                img {
                    margin:0 torem(70px);
                    display: block;
                    width: torem(178px);
                    height: torem(262px);
                }
                p {
                    position: absolute;
                    bottom: 0;
                    width: torem(318px);
                    height: torem(50px);
                    line-height: torem(50px);
                    text-align: center;
                    font-size: torem(18px);
                    color: #fff;
                    background:#000;
                    opacity:0.6;
                }
            }

            .item-r {
                float: right;
                padding: torem(30px) torem(20px) torem(16px) torem(20px);
                color: #fff;
                h2 {
                    width: torem(300px);
                    font-size: torem(30px);
                    margin-bottom: torem(20px);
                }
                p {
                    width: torem(300px);
                    height: torem(72px);
                    line-height: torem(36px);
                    font-size: torem(28px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .item-price {
                    font-size: torem(28px);
                    color: #fff;
                    font-weight: bold;
                    margin: torem(25px) 0;
                  }
                  .btn-buy {
                    float:right;
                    width: torem(194px);
                    height: torem(44px);
                    background: url(../image/btn-buy.jpg) no-repeat;
                    background-size: contain;
                  }
            }
        }
        


    }
